<template>
	<view class="content">
		<uni-steps :options="list1" active-color="#007AFF" :active="active" />
		<view class="status">
			<view id="inp">
				<text>住院人</text>
				<uni-easyinput focus v-model="addInfo.hospitalizedPeople" placeholder="请输入住院人姓名"></uni-easyinput>
			</view>
		</view>
		<view class="status">
			<view id="inp">
				<text>住院号</text>
				<uni-easyinput focus v-model="addInfo.hospitalNumber" placeholder="请输入住院号"></uni-easyinput>
			</view>
		</view>
		<view class="card">
			<view class="title">
				上传住院人资料
			</view>
			<!-- <view class="little">
				请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
			</view>
			<view class="img" @click="getImg">
				<text style="font-weight:800;color:#aaaaaa;font-size: 60rpx;">+</text>
				<text >上传身份证人像面照片</text>
				<image  v-for="item in imgArr " :src="item"/>
			</view>
			<view class="img" @click="getImg" >
				<text style="font-weight:800;color:#aaaaaa;font-size: 60rpx;">+</text>
				<text >上传身份证国徽面照片</text>
				
			</view>
			<view class="img">
				<text style="font-weight:800;color:#aaaaaa;font-size: 60rpx;">+</text>
				<text >上传手持身份证照片</text>
			</view> -->
		</view>
		<view class="btn">
				<button @click="go" type="primary" id="button">下一步</button>
			
		</view>
	</view>
	
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
			onLoad
		} from '@dcloudio/uni-app';
	let active = ref(1)
	let list1 = reactive([{
			title: '申请信息'
		},
		{
			title: '证件上传'
		},
		{
			title: '病历信息'
		}
	])
	let go = () => {
			uni.navigateTo({
				url: `/pages/recordSend/caseHistoryInfo/caseHistoryInfo?ob=`+encodeURIComponent(JSON.stringify(plusInfo))
			})
		}
		let obj=reactive({})
		let plusInfo=reactive({})
	onLoad((option) => {
			console.log(JSON.parse(decodeURIComponent(option.ob)),'dfs')
			obj=JSON.parse(decodeURIComponent(option.ob))
			
			plusInfo={...obj,...addInfo}
			console.log(plusInfo,23324)
			console.log(obj)
		})
	
	let addInfo=reactive({
		hospitalNumber:'',
		hospitalizedPeople:''
	})
	
	let src1=ref('')
	let imgArr=reactive([])
	const getImg=()=>{
		// 从相册选择6张图
		uni.chooseImage({
			count: 6,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: function(res) {
				// 预览图片
				uni.previewImage({
					urls: res.tempFilePaths,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function (image) {
								console.log(image.width);
								console.log(image.height);
								console.log(image.path)
							}
						});
			}
			});

		
	}

</script>

<style lang="less">
	.content {

		margin: 50rpx 30rpx;
		.btn {
			#button {
				margin: 80rpx 0;
				background-color: #007aff;
			}
		}
		.title{
			margin: 30rpx 0;
		}

		.title {
			color: #afafaf;
			font-size: 27rpx;
			margin: 40rpx 0;
		}

		.status {
			margin: 30rpx 0;
			padding: 30rpx 0;
			line-height: 80rpx;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;
			font-size: 28rpx;
		
			#inp {
				display: flex;
		
				text {
					width: 200rpx;
				}
			}
		}
		.card{
			color: #afafaf;
			.little{
				font-size: 20rpx;
				margin: 30rpx 0;
			}
			.img{
				background-color:#f1f7ff ;
				height: 300rpx;
				border-radius: 10rpx;
				margin: 30rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 100%;
					height: 300rpx;
					z-index: 1;
				}
			}
		}
	}
</style>
